<template>
  <div class="contain">
    <div class="travelNotes">
      <div class="index">
  <h2>发表新攻略</h2>
      <span class="fenxiang">分享你的个人游记，让更多人看到哦！</span>
      <div>
        <el-input v-model="input" placeholder="请输入标题"></el-input>


    <div>
      <!-- 实时演示编译器生成的html字符串,最终会被发送到服务器 -->
      {{ content }}
    </div>
    <!-- 富文本编译器 -->
    <!-- client-only:声明只在浏览器渲染 -->
    <client-only>
      <VueEditor v-model="content" />
    </client-only>

    <div>选择城市 <input type="text"></div>

  

      <el-button type="primary">发布</el-button>
        <span>或者 <i><el-button type="primary">保存到草稿</el-button></i></span>
  </div>
   </div>
    </div>
     </div>
</template>



<script>
import{VueEditor}from"vue2-editor"
export default {
  data() {
    return {

      input: '',
      form: {
        content: "",
        imgUpload: "",
        customToolbar: "",
        content:""
      }
    };
  },


  methods: {
    imgUpload() {}

  }
};
</script>


<style scoped lang="less">
.contain{
  width:1000px;
  margin: auto;
  padding: 20px 0;
  .travelNotes{
    width: 750px;
    line-height: 60px;
    h2{
      font-weight:400;
      font-size:30px;
      margin-bottom: 0px;
    }
  }
  .fenxiang{
    font-size: 15px;
    color:#ccc;
  }
}

</style>
